// React基础组件
import React from 'react'
// dva 连接组件 - 连接route和model
import { connect } from 'dva'
import moment from 'moment'
// 引入antd的组件
import {
  Form,
  Row,
  Col,
  Input,
  InputNumber,
  Table ,
  Tabs,
  DatePicker,
  Select,
  Button,
  Modal,
  Tooltip,
  Typography,
  message,
  Radio,
  Popconfirm,
  Checkbox,
  Spin
} from 'antd'
// import FileViewer from 'react-file-viewer'
//导入路由组件，用于跳转等
import { Link, hashHistory } from 'dva/router'
// 导入项目全局配置文件
import config from 'config/config'
// import {  isEmpty, isArray, cloneDeep, chunk, set } from 'lodash'
import Uploader from 'widget/Upload'
// 引入model取值工具方法
import { mapStateToProps } from 'utils/view_utils'
// 当前组件样式
import styles from './commissionsDistListDetailStyle.less'
import ListPage from 'widget/PageTmpl/ListPage'

import { CollapsiblePanels } from 'widget/CollapsiblePanels'
import { Grid, QueryCondition } from 'widget/Grid'
import classnames from 'classnames/bind'
let cx = classnames.bind(styles);

const { TextArea } = Input;
let test2;
const FormItem = Form.Item
const { TabPane } = Tabs;
const confirm = Modal.confirm;
// const { Text } = Typography;

const formItemLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 15 },
}
const formItemLayout01 = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
}
const formItemLayout02 = {
  labelCol: { span: 3},
  wrapperCol: { span: 21 },
}

/**
 * description 路由视图及事件处理
 * dispatch 分发到models中的effects对应事件名
 * model 用于获取models中state定义的数据
 * form 表单对象
 */
const commissionsDistListDetailView = function ({ dispatch, model, form }) {
  // 表单的子函数
  const { resetFields, getFieldDecorator, validateFieldsAndScroll, setFieldsValue } = form
  // 取出model对象，命名空间
  const { modelObj, namespace } = model
  let {cluesUpModalObj,uploading,againJointData,searchData,selectedRows1,selectedRowKeys1,applyDataListObj,applyDataList,pageConfig1,houseInfoData,buyHouseInfo,jointData,buyHouseModalObj,projectFilterParams,uploadFileObj,distributionNameList,tableObj,keys,aurList,imageUrls,imageUrls1,fileModalObj,riskId,createFaymentMethodFlag,funType,checkboxData,noSuitableDataList,suitableDataList,channelIndex,selectOptionData,deductionModalObj,oldCommissionModalObj,commissionModalObj,distCoNameModalObj,biz1,biz2,biz3,biz4,projectModalObj,actionType,id,detail,tableData, pageConfig, loading,selectedRowKeys} = modelObj
  if(!uploading){
    clearInterval(test2)
  }
  let pageProps1 = {   //分销公司名称
    // ---------- 界面部分 ----------
    ui: {
      // 页面接口地址
      api_url: `admin/commissionRule/queryAgentPage`,
      // 接口方式
      method: 'POST',
      headers: {
        'Content-type': 'application/json'
      },
      app: '',
      // 接口参数
      params:{
        projectId: detail.projectId,
        pageSize:'10',
        pageNo:'1'
      },
      // 模拟数据 - 用于开发需要，若填充了上面的api_url之后，请将此项设置为null
      // "mockData": mockData,
      mockData: null,
      selectedRowKeys:'',
      // 查询栏
      search_bar: {
        fields: [
          {
            en_name: 'orgName',
            zh_name: '分销公司名称',
            elem_type: 'Input',
            elem_valid_type: 'string',
          }
        ],
        searchHandler: (e) => { // 自定义搜索按钮回调函数，点击搜索时触发
          console.log('search click', e)
        },
        resetHandler: () => { // 自定义重置按钮回调函数，点击重置时触发
          console.log('reset click')
        },
        searchCallback: params => { // 自定义搜索完成后的后调函数, 搜索完成后触发, 并将本次搜索的参数传入
          console.log('search finish', params)
        },
        pasteTargetList: [  // 列表组件中将输入框的en_name作为默认id(也可以通过id另外设置)
          'carName',  // 将需要粘贴事件拦截的输入框id以数组的形式传入, 该参数对应PasteFromClipboard组件的targetList参数
        ]
      },
      // 数据表格
      'table':
        {
          rowSelectionInfo: {
            type: 'radio',
          },
          status_params: 'status=0',
          status_text: '全部',
          // 表头字段列表
          scroll: {x: 600},
          fields: [
            {
              en_name: 'orgName',
              zh_name: '分销公司名称',
              width: 400
            },
            {
              en_name: 'status1',
              zh_name: '机构性质',
            },
            {
              en_name: 'status2',
              zh_name: '业务类型',
            },
          ],
          // 表格操作
          actions: [],
        },
      action_bar: [
        {
          // label:'',
          // type:'',
          rowSelection: [],
          render: () => {
            return <Input hidden/>
          },
          onClick: (e, row) => {
          }
        },
      ]
    },
  }
  let pageProps2 = {   //项目名称
    // ---------- 界面部分 ----------
    ui: {
      // 页面接口地址
      api_url: `3rd/commission/queryProjectHead`,
      // 接口方式
      method: 'POST',
      headers: {
        'Content-type': 'application/json'
      },
      app: '',
      // 接口参数
      params: {
        "pageSize":10,
        "pageNo":1,
        projectId:projectFilterParams
      },
      // 模拟数据 - 用于开发需要，若填充了上面的api_url之后，请将此项设置为null
      // "mockData": mockData,
      mockData: null,

      selectedRowKeys:'',
      // 查询栏
      search_bar: {
        fields: [
          {
            en_name: 'projectName',
            zh_name: '项目名称',
            elem_type: 'Input',
            elem_valid_type: 'string',
          },
        ],
        searchHandler: (e) => { // 自定义搜索按钮回调函数，点击搜索时触发
          console.log('search click', e)
        },
        resetHandler: () => { // 自定义重置按钮回调函数，点击重置时触发
          console.log('reset click')
        },
        searchCallback: params => { // 自定义搜索完成后的后调函数, 搜索完成后触发, 并将本次搜索的参数传入
          console.log('search finish', params)
        },
        pasteTargetList: [  // 列表组件中将输入框的en_name作为默认id(也可以通过id另外设置)
          'carName',  // 将需要粘贴事件拦截的输入框id以数组的形式传入, 该参数对应PasteFromClipboard组件的targetList参数
        ]
      },
      // 数据表格
      'table':
        {
          rowSelectionInfo: {
            type: 'radio',
          },
          status_params: 'status=0',
          status_text: '全部',
          // 表头字段列表
          scroll: {x: 800},
          fields: [
            {
              en_name: 'regionName',
              zh_name: '区域公司',
              // width: 100,
            },
            {
              en_name: 'projectName',
              zh_name: '项目名称',
              // width: 100,
            },
            {
              en_name: 'projectId',
              zh_name: '项目ID',
              width: 180
            },
          ],
          // 表格操作
          actions: [],
        },
      action_bar: [
        {
          // label:'',
          // type:'',
          rowSelection: [],
          render: () => {
            return <Input hidden/>
          },
          onClick: (e, row) => {
          }
        },
      ]
    },
  }
  let pageProps3 = {   //佣金方案
    // ---------- 界面部分 ----------
    ui: {
      // 页面接口地址
      api_url: `admin/commissionRule/list`,
      // 接口方式
      method: 'POST',
      headers: {
        'Content-type': 'application/json'
      },
      app: '',
      // 接口参数
      params: {
        projectId: detail.projectId,
        pageSize:'10',
        pageNo:'1',
        distCoId: detail.distCoId
        },
      // 模拟数据 - 用于开发需要，若填充了上面的api_url之后，请将此项设置为null
      // "mockData": mockData,
      mockData: null,

      selectedRowKeys:'',
      // 查询栏
      search_bar: {
        fields: [
          {
            en_name: 'name',
            zh_name: '佣金方案',
            elem_type: 'Input',
            elem_valid_type: 'string',
          },
        ],
        searchHandler: (e) => { // 自定义搜索按钮回调函数，点击搜索时触发
          console.log('search click', e)
        },
        resetHandler: () => { // 自定义重置按钮回调函数，点击重置时触发
          console.log('reset click')
        },
        searchCallback: params => { // 自定义搜索完成后的后调函数, 搜索完成后触发, 并将本次搜索的参数传入
          console.log('search finish', params)
        },
        pasteTargetList: [  // 列表组件中将输入框的en_name作为默认id(也可以通过id另外设置)
          'carName',  // 将需要粘贴事件拦截的输入框id以数组的形式传入, 该参数对应PasteFromClipboard组件的targetList参数
        ]
      },
      // 数据表格
      'table':
        {
          status_params: 'status=0',
          status_text: '全部',
          // 表头字段列表
          scroll: {x: 600},
          fields: [
            {
              en_name: 'name',
              zh_name: '佣金方案',
              render:(a, item, index, d, e, f)=>{
                  return item.name
              }
            },
            {
              en_name: 'version',
              zh_name: '版本号',
              render:(a, item, index, d, e, f)=>{
                  return item.version? 'V'+ item.version: ''
              }
            },
            {
              en_name: 'computeNodes',
              zh_name: '佣金计算节点',
              render:(a, item, index, d, e, f)=>{
                if(item.computeNodes == 1){
                  return '按签约归属日期'
                }else if(item.computeNodes == 2){
                  return '按认购归属日期'
                }else if(item.computeNodes == 3){
                  return '按网签日期'
                }
              }
            },
            {
              en_name: 'buyStatus',
              zh_name: '是否生效',
              render:(a, item, index, d, e, f)=>{
                if(item.buyStatus == 0){
                  return '否'
                }else if(item.buyStatus == 1){
                  return '是'
                }
              }
            }, 
            {
              en_name: 'flowState',
              zh_name: '流程状态',
              render:(a, item, index, d, e, f)=>{
                if(item.flowState == 0){
                  return '未提交'
                }else if(item.flowState == 1){
                  return '已审批'
                }else if(item.flowState == 2){
                  return '审批中'
                }else if(item.flowState == 3){
                  return '作废'
                }
              }
            },
            {
              en_name: 'approverByName',
              zh_name: '审批人',
            }, 
            {
              en_name: 'createByName',
              zh_name: '创建人',
            },
          ],
          // 表格操作
          actions: [],
        },
      action_bar: [
        {
          // label:'',
          // type:'',
          rowSelection: [],
          render: () => {
            return <Input hidden/>
          },
          onClick: (e, row) => {
          }
        },
      ]
    },
  }

  const columns88 = [
    {
      title: "序号",
      dataIndex: '',
      key: '',
      width: 60,
      render: (a, item, index, d, e, f) => {
        return index+1
      },
    },
    {
      title: '客户名称',
      dataIndex: 'customerName',
      key: 'customerName',
    },
    {
      title: '手机号码',
      dataIndex: 'customerMobile',
      key: 'customerMobile',
    },
    {
      title: '复核风险状态',
      dataIndex: 'riskState',
      key: 'riskState',
      render: function (value, item, index) {
        if(item.riskState == 1){
          return '正常'
        }else if(item.riskState == 2){
          return '风险'
        }else if(item.riskState == 3){
          return '判定正常'
        }else if(item.riskState == 4){
          return '判定风险'
        }else if(item.riskState == 5){
          return '确定正常'
        }
      }
    },
    {
      title: '人脸抓拍时间',
      dataIndex: 'snapTime',
      key: 'snapTime',
      render: function (value, item, index) {
        return  item.snapTime?item.snapTime.substring(0,10):''
      }
    },
    {
      title: '报备时间',
      dataIndex: 'reportTime',
      key: 'reportTime',
      render: function (value, item, index) {
        return  item.reportTime?item.reportTime.substring(0,10):''
      }
    },
    {
      title: '首次登记时间',
      dataIndex: 'firstRegisterTime',
      key: 'firstRegisterTime',
      render: function (value, item, index) {
        return  item.firstRegisterTime?item.firstRegisterTime.substring(0,10):''
      }
    },
    {
      title: '身份证号码',
      dataIndex: 'customerCard',
      key: 'customerCard',
    },
    {
      title: '认购归属日期',
      dataIndex: 'resetDate',
      key: 'resetDate',
      render: function (value, item, index) {
        return  item.resetDate?item.resetDate.substring(0,10):''
      }
    },
    {
      title: '签约归属日期',
      dataIndex: 'signDate',
      key: 'signDate',
      render: function (value, item, index) {
        return  item.signDate?item.signDate.substring(0,10):''
      }
    },
    {
      title: '签约房间',
      dataIndex: 'houseName',
      key: 'houseName',
    },
    {
      title: '置业顾问',
      dataIndex: 'assessorName',
      key: 'assessorName',
    },
    {
      title: '渠道来源',
      dataIndex: 'transactionSource',
      key: 'transactionSource',
    },
    {
      title: '分销公司名称',
      dataIndex: 'distCoName',
      key: 'distCoName',
    },
    {
      title: '佣金归属',
      dataIndex: 'Action',
      key: 'Action',
      render: function (value, item, index) {
        return  <div>
                 <Checkbox checked={item.handleUnionBuy} onChange={e=>{handleUnionBuyChange(e.target.checked,item)}}></Checkbox>
                </div> 
      }
    }
  ];
  const columnsInfo = [
    {
      title: "序号",
      dataIndex: '',
      key: '',
      width: 60,
      render: (a, item, index, d, e, f) => {
        return index+1
      },
    },
    {
      title: '客户名称',
      dataIndex: 'customerName',
      key: 'customerName',
    },
    {
      title: '手机号码',
      dataIndex: 'customerMobile',
      key: 'customerMobile',
    },
    {
      title: '复核风险状态',
      dataIndex: 'riskState',
      key: 'riskState',
      render: function (value, item, index) {
        if(item.riskState == 1){
          return '正常'
        }else if(item.riskState == 2){
          return '风险'
        }else if(item.riskState == 3){
          return '判定正常'
        }else if(item.riskState == 4){
          return '判定风险'
        }else if(item.riskState == 5){
          return '确定正常'
        }
      }
    },
    {
      title: '人脸抓拍时间',
      dataIndex: 'snapTime',
      key: 'snapTime',
      render: function (value, item, index) {
        return  item.snapTime?item.snapTime.substring(0,10):''
      }
    },
    {
      title: '报备时间',
      dataIndex: 'reportTime',
      key: 'reportTime',
      render: function (value, item, index) {
        return  item.reportTime?item.reportTime.substring(0,10):''
      }
    },
    {
      title: '首次登记时间',
      dataIndex: 'firstRegisterTime',
      key: 'firstRegisterTime',
      render: function (value, item, index) {
        return  item.firstRegisterTime?item.firstRegisterTime.substring(0,10):''
      }
    },
    {
      title: '身份证号码',
      dataIndex: 'customerCard',
      key: 'customerCard',
    },
    {
      title: '认购归属日期',
      dataIndex: 'resetDate',
      key: 'resetDate',
      render: function (value, item, index) {
        return  item.resetDate?item.resetDate.substring(0,10):''
      }
    },
    {
      title: '签约归属日期',
      dataIndex: 'signDate',
      key: 'signDate',
      render: function (value, item, index) {
        return  item.signDate?item.signDate.substring(0,10):''
      }
    },
    {
      title: '签约房间',
      dataIndex: 'houseName',
      key: 'houseName',
    },
    {
      title: '置业顾问',
      dataIndex: 'assessorName',
      key: 'assessorName',
    },
    {
      title: '渠道来源',
      dataIndex: 'transactionSource',
      key: 'transactionSource',
    },
    {
      title: '分销公司名称',
      dataIndex: 'distCoName',
      key: 'distCoName',
    }
  ];
  // modelObj.xxx获取model中状态机的值
  const columns = [
    {
      title: '客户名称', dataIndex: 'customerName', key: 'customerName', width: 180,
      render: function (value, item, index) {
        return <div style={{ wordWrap: 'break-word', wordBreak: 'break-word' }}>
                {value}
              </div>
      }
    },
    {
      title: '手机号码', dataIndex: 'customerMobile', key: 'customerMobile',width: 220,
      render: function (value, item, index) {
        return <div style={{ wordWrap: 'break-word', wordBreak: 'break-word' }}>
                  {value}
                </div>
      }
    },
    {
      title: '复核风险状态', dataIndex: 'riskState', key: 'riskState',width: 180,
      render: function (value, item, index) {
        if(item.riskState == 1){
          return '正常'
        }else if(item.riskState == 2){
          return '风险'
        }else if(item.riskState == 3){
          return '判定正常'
        }else if(item.riskState == 4){
          return '判定风险'
        }else if(item.riskState == 5){
          return '确定正常'
        }
      }
    },
    {
      title: '人脸抓拍首访时间', dataIndex: 'snapTime', key: 'snapTime',width: 180,
      render: function (value, item, index) {
        return item.snapTime  || ''
      }
    },
    {
      title: '报备时间', dataIndex: 'reportTime', key: 'reportTime',width: 180,
      render: function (value, item, index) {
        return item.reportTime  || ''
      }
    },
    {
      title: '首次登记时间', dataIndex: 'firstRegisterTime', key: 'firstRegisterTime',width: 180,
      render: function (value, item, index) {
        return item.firstRegisterTime  || ''
      }
    },
    {
      title: '身份证号码', dataIndex: 'customerCard', key: 'customerCard',width: 220,
      render: function (value, item, index) {
        return item.customerCard  || ''
      }
    },
    {
      title: '身份证地址', dataIndex: 'address', key: 'address',width: 240,
      render: function (value, item, index) {
        return <div style={{ wordWrap: 'break-word', wordBreak: 'break-word' }}>
                {value}
              </div>
      }
    },
    {
      title: '认购归属日期', dataIndex: 'resetDate', key: 'resetDate',width: 180,
      render: function (value, item, index) {
        return item.resetDate?item.resetDate.substring(0,10):''
      }
    },
    {
      title: '签约归属日期', dataIndex: 'signDate', key: 'signDate',width: 180,
      render: function (value, item, index) {
        return  item.signDate?item.signDate.substring(0,10):''
      }
    },
    {
      title: '签约房间', dataIndex: 'houseName', key: 'houseName',width: 180,
      render: function (value, item, index) {
        return <div style={{ wordWrap: 'break-word', wordBreak: 'break-word' }}>
                {value}
              </div>
      }
    },
    {
        title: '建筑面积', dataIndex: 'houseArea', key: 'houseArea',width: 120,
        render: function (value, item, index) {
          return item.houseArea
        }
      },
      {
        title: '签约金额', dataIndex: 'totalAmount', key: 'totalAmount',width: 100,
        render: function (value, item, index) {
          return item.totalAmount || ''
        }
      },
      {
        title: '实际总佣金金额', dataIndex: 'commissionAmount', key: 'commissionAmount',width: 140,
        render: function (value, item, index) {
         if(item.acState == '1' && item.buyState != '3'&&!detail.applyName){
            return <div>
            <InputNumber
              precision={2} step={0.01}
              value = {item.commissionAmount} disabled={actionType == 'check'} 
              onChange={value => { tableChange(value,'commissionAmount', item) }}
            />
          </div>
          }else if(item.houseArea == '合计'){
            return  item.commissionAmount = countFun('实际总佣金金额')
          }else{
            return item.commissionAmount
          }
        }
      },
      {
        title: '总佣金金额(系统计算)', dataIndex: 'commissionAmountRule', key: 'commissionAmountRule',width: 140,
        render: function (value, item, index) {
          return item.commissionAmountRule || ''
        }
      },
      {
        title: '本次应付佣金', dataIndex: 'theAmount', key: 'theAmount',width: 140,editable: true,
        render: function (value, item, index) {
          if(!item.id){
            return <div>
            <Input type={'number'} value = {item.theAmount} disabled={actionType == 'check'} 
                onChange={(e) => { tableChange(e.target.value.replace(/[^\-?\d.]/g,''), 'theAmount',item) }}
              />
          </div>
          }else if(item.acState == '1' && item.buyState == '3'){
            return <div>
            <Input type={'number'}  value = {item.theAmount} disabled={actionType == 'check'} 
                onChange={(e) => { tableChange(e.target.value.replace(/[^\-?\d.]/g,''), 'theAmount',item) }}
              />
          </div>
          }else if(item.acState == '1' && item.buyState != '3'){
            return <div>
            <InputNumber
              max={item.commissionAmount-item.paidAmount} precision={2} step={0.01}
              value = {item.theAmount} disabled={actionType == 'check'} 
              onChange={value => { tableChange(value,'theAmount', item) }}
            />
          </div>
          }else if(item.houseArea == '合计'){
            return  item.theAmount = countFun()
          }else{
            return item.theAmount
          }
        }
      },
      {
        title: '已付佣金', dataIndex: 'paidAmount', key: 'paidAmount',width: 100,
        render: function (value, item, index) {
          return item.paidAmount 
        }
      },
      {
        title: '付款方式', dataIndex: 'paymentTypeName', key: 'paymentTypeName',width: 180,
        render: function (value, item, index) {
          return <div style={{ wordWrap: 'break-word', wordBreak: 'break-word' }}>
                    {value}
                </div>
        }
      },
      {
        title: '回款比例', dataIndex: 'paymentRatioNum', key: 'paymentRatioNum',width: 100,
        render: function (value, item, index) {
          if(item.paymentRatioNum){
            return Math.round(item.paymentRatioNum*100) + '%'
          }else{
            return ''
          }
        }
      },
      {
        title: '佣金比例/固定金额', dataIndex: 'ratioNum', key: 'ratioNum',width: 100,
        render: function (value, item, index) {
          if(item.ratioNum ){
            return item.ratioNum + '%'
          }else if(!item.ratioNum &&item.houseArea != '合计'&&item.buyState != '3'){
            return item.commissionAmountRule
          }else{
            return ''
          }
        }
      },
      {
        title: '佣金计算方案', dataIndex: 'ruleName', key: 'ruleName',width: 200,
        render: function (value, item, index) {
          return item.ruleName  || ''
        }
      },
     
      {
        title: '置业顾问', dataIndex: 'assessorName', key: 'assessorName',width: 180,
        render: function (value, item, index) {
          return item.assessorName  || ''
        }
      },
      {
        title: '分销公司名称', dataIndex: 'distCoName', key: 'distCoName',width: 240,
        render: function (value, item, index) {
          return item.distCoName  || ''
        }
      },
      {
        title: '购房状态', dataIndex: 'buyState', key: 'buyState',width: 110,
        render: function (value, item, index) {
          if(item.buyState == 1){
            return '草签'
          }else if(item.buyState == 2){
            return '网签'
          }else if(item.buyState == 3){
            return '退房'
          }
        }
      },
      {
        title: '是否购买多套', dataIndex: 'fullNumber', key: 'fullNumber',width: 120,
        render: function (value, item, index) {
          if(item.fullNumber > 1){
            return '是'
          }else {
            return '否'
          }
        }
      },
      {
        title: '线索状态', dataIndex: 'clueStatus', key: 'clueStatus',width: 120,
        render: function (value, item, index) {
          if(item.clueStatus == 1){
            return '失效'
          }else {
            return '生效'
          }
        }
      },
      {
        title: '备注', dataIndex: 'remark', key: 'remark',
        render: function (value, item, index) {
          return <div>
          <Input  value = {item.remark}
              onChange={(e) => { tableChange(e.target.value, 'remark',item) }}
            />
        </div>
        }
      },
  ]
  // 表格配置------------开始
  const gridProps = {
    nameSpace: namespace,
    selectedKeysChange: 'selectedKeysChange',
    data: {
      columns: [].concat(columns, generateAction())
      ,//已发布的活动不能添加和删除时间段
      pageConfig:{},
      tableData: {total: '',dataSource: channelIndex=='1'?suitableDataList : noSuitableDataList},
      selectedRowKeys,
    },
    scroll: { x: 4800 },
    paginationFlag : false,
    loading
  }

  const columns1 = [
    {
      title: '序号', dataIndex: 'ruleNo', key: 'ruleNo', width: 60,
      render: function (value, item, index) {
        return index+1
      }
    }, 
    {
      title: '申请单事项', dataIndex: 'applyReason', key: 'applyReason', width: 240,
      render: function (value, item, index) {
        return item.applyReason
      }
    },
    {
      title: '分销公司名称', dataIndex: 'distCoName', key: 'distCoName', width: 140,
      render: function (value, item, index) {
        return item.distCoName
      }
    },
    {
      title: '佣金申请单号', dataIndex: 'id', key: 'id', width: 100,
      render: function (value, item, index) {
        return item.id
      }
    },
    {
      title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 80,
      render: function (value, item, index) {
        return item.createTime
      }
    }
  ]
  let gridProps1 = {
    nameSpace: namespace,
    selectedKeysChange: 'selectedKeysChange1',
    data: {
      columns: columns1,
      pageConfig:pageConfig1, tableData:applyDataListObj,
      selectedRowKeys:selectedRowKeys1,
    },
    pageChange: (pageNo, pageSize) => {
      applyDataListObj.pageNo = pageNo
      applyDataListObj.pageSize = pageSize
      pageConfig1.pageNo = pageNo
      pageConfig1.pageSize = pageSize
      tableData = applyDataListObj
      pageConfig = pageConfig1
      changeState({ applyDataListObj, pageConfig1 });
    },
    scroll: { x: 800 },
    loading
  }

  // 重选联名
  const columns3 = [
    {
      title: "序号",
      dataIndex: '',
      key: '',
      width: 60,
      render: (a, item, index, d, e, f) => {
        return index+1
      },
    },
    {
      title: '客户名称',
      dataIndex: 'customerName',
      key: 'customerName',
    },
    {
      title: '手机号码',
      dataIndex: 'customerMobile',
      key: 'customerMobile',
    },
    {
      title: '复核风险状态',
      dataIndex: 'riskState',
      key: 'riskState',
      render: function (value, item, index) {
        if(item.riskState == 1){
          return '正常'
        }else if(item.riskState == 2){
          return '风险'
        }else if(item.riskState == 3){
          return '判定正常'
        }else if(item.riskState == 4){
          return '判定风险'
        }else if(item.riskState == 5){
          return '确定正常'
        }
      }
    },
    {
      title: '人脸抓拍时间',
      dataIndex: 'snapTime',
      key: 'snapTime',
      render: function (value, item, index) {
        return  item.snapTime?item.snapTime.substring(0,10):''
      }
    },
    {
      title: '报备时间',
      dataIndex: 'reportTime',
      key: 'reportTime',
      render: function (value, item, index) {
        return  item.reportTime?item.reportTime.substring(0,10):''
      }
    },
    {
      title: '首次登记时间',
      dataIndex: 'firstRegisterTime',
      key: 'firstRegisterTime',
      render: function (value, item, index) {
        return  item.firstRegisterTime?item.firstRegisterTime.substring(0,10):''
      }
    },
    {
      title: '身份证号码',
      dataIndex: 'customerCard',
      key: 'customerCard',
    },
    {
      title: '认购归属日期',
      dataIndex: 'resetDate',
      key: 'resetDate',
      render: function (value, item, index) {
        return  item.resetDate?item.resetDate.substring(0,10):''
      }
    },
    {
      title: '签约归属日期',
      dataIndex: 'signDate',
      key: 'signDate',
      render: function (value, item, index) {
        return  item.signDate?item.signDate.substring(0,10):''
      }
    },
    {
      title: '签约房间',
      dataIndex: 'houseName',
      key: 'houseName',
    },
    {
      title: '置业顾问',
      dataIndex: 'assessorName',
      key: 'assessorName',
    },
    {
      title: '渠道来源',
      dataIndex: 'transactionSource',
      key: 'transactionSource',
    },
    {
      title: '分销公司名称',
      dataIndex: 'distCoName',
      key: 'distCoName',
    },
    {
      title: '操作',
      fixed: 'right',
      width: 100,
      key: 'operation',
      render: (data, record, index) => {
        var t1 = moment()
        var t3=record.endTime
        return (
          moment(t3).isBefore(t1)?null
          :
          <span>
              <a href='javascript:void(0)' onClick={() => {againFun(data)}}>
                重选
              </a>
          </span>
        )
      }
    }
  ];

  function againFun(data){
    id = data&&data.id?data.id:""
    confirm({
      title: '重选确认',
      content: '您真的要重选此条申请单信息吗?',
      okText: '确认',
      okType: 'primary',
      cancelText: '取消',
      onOk() {
        dispatch({
          type: `${namespace}/againdelete`,
          payload: {id}
        })
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }


  //修改状态
  const changeState = (payload) => {
    dispatch({
      type: `${namespace}/updateStore`,
      payload: { ...payload }
    })
  }
  // 详情页跳转
  function routerGo() {
    hashHistory.push({
      pathname: '/home/commissions/commissionsDistList',
      query: {}
    })
  }
   // 表格操作区域
   function generateAction () {
    return {
      title: '操作',
      key: 'operation',
      fixed: 'right',
      width: '208px',
      render: (data, record, index) => {
        var t1 = moment()
        var t2 = record.startTime
        var t3=record.endTime
        return (
          moment(t3).isBefore(t1)?null
          :
          <span>
              {data.clueStatus==1&&<a href='javascript:void(0)' onClick={() => {cluesUp(data,'show')}}>
                失效原因 
              </a>}
              <span className="ant-divider" />
              <a href='javascript:void(0)' onClick={() => {queryLmDetail(data)}}>
                联名明细
              </a>
              <span className="ant-divider" />
              <a href='javascript:void(0)' onClick={() => {checkItem(data)}}>
                查看风控详情
              </a>
          </span>
        )
      }
    }
  }
  //查看风控详情
  function checkItem(data){
    riskId = data.riskId
    dispatch({
      type: `${namespace}/updateStore`,
      payload: { riskId }
    })
    dispatch({
      type: `${namespace}/getMcrmAdmin`,
      payload: {}
    })
  }
//联名明细
  function queryLmDetail(data){
    if(!data.isUnionBuy){
      message.warn('只有联名客户才能查看')
      return false
    }
    dispatch({
      type: `${namespace}/queryLmDetail`,
      payload: {id:data.transactionId}
    })
  }
  //关闭
  function onCancel(){
    routerGo()
  }
  // 取消关联
  function onClear(){
    detail.applyName = ''
    // detail.applyId = ''
    detail.applyIdList = []
    detail.accountingId = ''//费控核算主体id
    detail.accountingName= ''//费控核算主体
    detail.endTime= ''//签约日期
    detail.ruleName = ''
    detail.ruleId = ''
    detail.computeNodes = ''
    suitableDataList = []
    noSuitableDataList = []
    detail.applyDetail = []
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {detail,noSuitableDataList,suitableDataList}
    })
    form.resetFields()
  }
  // 保存
  function onSave() {
    validateFieldsAndScroll((err) => {
      if (err) {
        return false
      } else {
        dispatch({
          type: `${namespace}/queryCheckOut`,
          payload: {}
        })
      }
    })
  }
  // 计算总和
  function countFun(type){
    let tatal = 0
    for(var item of suitableDataList){
      if(item.houseArea != '合计'){
        if(type=='实际总佣金金额'){
          tatal += parseFloat(item.commissionAmount)
        }else{
          tatal += parseFloat(item.theAmount)
        }
      }
    }
    tatal =  Math.round(parseFloat(tatal)*100)/100
    return tatal
  }
  //生成佣金明细
  function onCreate(){
    validateFieldsAndScroll((err) => {
      if (err) {
        return false
      } else {
        dispatch({
          type: `${namespace}/queryApplyDetailLm`,
          payload: {}
        })
      }
    })
  }
  //删除佣金明细
  
  function onDelete(){
    validateFieldsAndScroll((err) => {
      if (err) {
        return false
      } else {
        dispatch({
          type: `${namespace}/ondelete`,
          payload: {}
        })
      }
    })
  }

  //导出客户
  function exportClient(){
    validateFieldsAndScroll((err) => {
      if (err) {
        return false
      } else {
        dispatch({
          type: `${namespace}/down`,
          payload: {}
        })
      }
    })
  }
  
   //分销公司名称
  function updateDistCoName(){
    if(!detail.projectId){
      message.warn('请先选择项目名称')
      return false
    }
    distCoNameModalObj.visible = !distCoNameModalObj.visible
    changeState({ distCoNameModalObj})
  }
  function confirmDistCoName(){
    detail.distCoName = biz1.selectedRows[0]?biz1.selectedRows[0].orgName : ''
    detail.distCoId = biz1.selectedRows[0]?biz1.selectedRows[0].orgId: ''
    detail.applyName = ''
    detail.applyIdList = []
    detail.accountingId = ''//费控核算主体id
    detail.accountingName= ''//费控核算主体
    detail.endTime= ''//签约日期
    detail.ruleName = ''
    detail.ruleId = ''
    detail.computeNodes = ''
    suitableDataList = []
    noSuitableDataList = []
    detail.applyDetail = []
    createFaymentMethodFlag = false
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {detail,createFaymentMethodFlag,suitableDataList,noSuitableDataList}
    })
    form.resetFields()
    updateDistCoName()
  }

  //项目名称弹窗事件 
  function updateProjectName(){
    projectModalObj.visible = !projectModalObj.visible
    changeState({ projectModalObj})
  }
  function confirmProject(){
    detail.projectName = biz2.selectedRows[0]?biz2.selectedRows[0].projectName:''
    detail.projectId = biz2.selectedRows[0]?biz2.selectedRows[0].projectId:''
    createFaymentMethodFlag = false
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {detail,createFaymentMethodFlag}
    })
    dispatch({
      type: `${namespace}/searchAccountingName`,
      payload: {}
    })
    form.resetFields()
    updateProjectName()
  }

   //佣金方案
  function updateCommission(){
    if(!detail.projectId){
      message.warn('请先选择项目名称')
      return false
    }
    if(!detail.distCoId){
      message.warn('请先选择分销公司名称')
      return false
    }
    commissionModalObj.visible = !commissionModalObj.visible
    changeState({ commissionModalObj})
  }
  function confirmCommission(){
    let tempList = biz3.selectedRows
    if(tempList.length&&tempList.length>1){
      let arr = []
      let arr1 = []
      let find = false
      let find1 = false
      for (var i = 0; i < tempList.length; i++) {
        for (var j = i + 1; j < tempList.length; j++) {
            if (tempList[i].computeNodes != tempList[j].computeNodes ){
              find = true; break;
            }else if(tempList[i].noCommission != tempList[j].noCommission ){
              find1 = true; break;
            }else{
              arr.push(tempList[i].name)
              arr.push(tempList[j].name)
              arr1.push(tempList[i].id)
              arr1.push(tempList[j].id)
              detail.computeNodes = tempList[i].computeNodes
              detail.noCommission = tempList[i]?tempList[i].noCommission:''
            }
          }
          if (find) break;
          if (find1) break;
      }
      if(find){
        message.warn('只能选佣金计算节点相同的方案')
        return false
      }
      if(find1){
        message.warn('只能选同一规则类型的方案')
        return false
      }
      detail.ruleName = arr.join(';')?arr.join(';'): ''
      detail.ruleId = arr1.join(';')?arr1.join(';'): ''
    }else{
      detail.ruleName = biz3.selectedRows[0]?biz3.selectedRows[0].name:''
      detail.ruleId = biz3.selectedRows[0]?biz3.selectedRows[0].id:''
      detail.computeNodes = tempList[0]?tempList[0].computeNodes:''
      detail.noCommission = tempList[0]?tempList[0].noCommission:''
    }
    createFaymentMethodFlag = false
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {detail,createFaymentMethodFlag}
    })
    form.resetFields()
    updateCommission()
  }

  //关联原佣金申请单
  function updateOldCommission(){
    if(!detail.projectId){
      message.warn('请先选择项目名称')
      return false
    }
    if(!detail.distCoId){
      message.warn('请先选择分销公司名称')
      return false
    }
    dispatch({type: `${namespace}/listAssociated`,payload: {}})
    oldCommissionModalObj.visible = !oldCommissionModalObj.visible
    changeState({ oldCommissionModalObj})
  }
  function confirmOldCommission(){
    detail.applyIdList = selectedRows1.map((item, index) => {
      return {
        applyId: item.applyId,
        applyId2: item.id,
        applyName: item.applyReason
      }
    })
    detail.applyName = selectedRows1.length?selectedRows1.map(item =>{
      return item.applyReason
    }).join(','):''
    detail.accountingId = selectedRows1[0]?selectedRows1[0].accountingId: ''//费控核算主体id
    detail.accountingName= selectedRows1[0]?selectedRows1[0].accountingName: ''//费控核算主体
    detail.ruleName = selectedRows1[0]?selectedRows1[0].ruleName:''
    detail.ruleId = selectedRows1[0]?selectedRows1[0].ruleId:''
    detail.computeNodes = selectedRows1[0]?selectedRows1[0].computeNodes:''
 
    selectedRows1.sort(function(a,b){return b['endTime'] > a['endTime'] ? 1 : -1 })
    detail.endTime= selectedRows1[0]?selectedRows1[0].endTime: ''//签约日期
    createFaymentMethodFlag = false
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {detail,createFaymentMethodFlag}
    })
    form.resetFields()
    updateOldCommission()
  }

  // 搜索
  function inputSearch (value, name) {
    let obj = {[name]: value}
    searchData = Object.assign(searchData, obj)
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {searchData}
    })
  }
  function searchFun(){
    applyDataListObj.dataSource = applyDataListObj.dataSource.filter(item => item.applyReason.includes(searchData.applyReason))
    applyDataListObj.dataSource = applyDataListObj.dataSource.filter(item => item.distCoName.includes(searchData.distCoName))
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {applyDataListObj}
    })
  }
  function clearFun(){
    searchData.applyReason = ''
    searchData.distCoName = ''
    applyDataListObj.dataSource = applyDataList
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {applyDataListObj,searchData}
    })
  }

  //退房佣金抵扣
  function updateDeduction(){
    deductionModalObj.visible = !deductionModalObj.visible
    deductionModalObj.deduction = ''
    deductionModalObj.deductionInfo = ''
    changeState({ deductionModalObj,keys})
  }
  function confirmDeduction(){
    tableObj.key = ++keys
    tableObj.theAmount = -deductionModalObj.deduction
    tableObj.remark = deductionModalObj.deductionInfo
    tableObj.buyState = 3
    tableObj.acState = 1

    let obj = JSON.parse(JSON.stringify(tableObj))
    detail.applyDetail.push(obj)
    let arr2 = suitableDataList.reverse()
    arr2.splice(1, 0, obj)
    suitableDataList = arr2.reverse()
    changeState({ detail,suitableDataList,keys})
    countFun()
    updateDeduction()
  }
  function inputModChange (value, name) {
    let obj = {[name]: value}
    deductionModalObj = Object.assign(deductionModalObj, obj)
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {deductionModalObj}
    })
  }

// 附件
  function updateFileModal(){
    fileModalObj.visible = !fileModalObj.visible
    dispatch({
      type: `${namespace}/updateStore`,
      payload: { fileModalObj }
    })
  }
  function removeImgUrl(index){
    aurList[index].isDelete = 0
    imageUrls.splice(index, 1)
    dispatch({
        type: `${namespace}/updateStore`,
        payload: { imageUrls,aurList }
    })
  }
  function updateImageModel(value,fileObj) {
    let obj = {
      url:value,
      name:fileObj.name,
    }
    imageUrls.push(obj)
    aurList.push(obj)
  }
  function removeAll(){
    for(var item of aurList){
      item.isDelete = 0
    }
    imageUrls = []
      dispatch({
        type: `${namespace}/updateStore`,
        payload: { imageUrls,aurList }
    })
  }

  //联名购房佣金归属确认
  function updateBuyHouse(){
    buyHouseModalObj.visible=!buyHouseModalObj.visible
    changeState({buyHouseModalObj})
  }
  function confirmBuyHouse(){
    var list = jointData.filter(item => { return item.handleUnionBuy == 1; })
    if(list.length >0){
      confirm({
        title: '选择确认',
        content: '您确认所选的佣金归属吗？',
        okText: '确认',
        okType: 'primary',
        cancelText: '取消',
        onOk() {
          dispatch({
            type: `${namespace}/saveLmHandleUnionBuy`,
            payload: {}
          })
          updateBuyHouse()
        },
        onCancel() {
          console.log('Cancel');
        },
      });
    }else{
      message.warn('选择联名购房人员后才能点击确认')
    }
  }
  function handleUnionBuyChange(value,it){
    let val = ''
    let list = []
    value ?val=1:val=0
    for(var item of jointData){
      if(item.id == it.id){
        item.handleUnionBuy = val
      }
      if(item.transactionId == it.transactionId){
        list.push(item)
      }
    }
    for(var itemd of list){
      if(itemd.id == it.id&&val){
        itemd.handleUnionBuy = 1
      }else{
        itemd.handleUnionBuy = 0
      }
    }
    
    changeState({jointData})
  }

  // 联名购房明细
  function updateHouseInfo(){
    buyHouseInfo.visible=!buyHouseInfo.visible
    changeState({buyHouseModalObj})
  }

  //联名购房明细

  //上传附件
  function updateUploadModal(){
    uploadFileObj.visible=!uploadFileObj.visible
    changeState({uploadFileObj})
  }
  function removeImgUrl1(index){
    imageUrls1.splice(index, 1)
    dispatch({
        type: `${namespace}/updateStore`,
        payload: { imageUrls1 }
    })
  }
  function updateImageModel1(value,fileObj) {
    imageUrls1[0]={
        url:value,
        name:fileObj.name,
    };
    // 分发到model
    dispatch({
        type: `${namespace}/updateStore`,
        payload: { imageUrls1 }
    })
  };

  // 自定义日期范围的约束函数
  function disabledDate(current) {
    return current < moment(detail.startTime)|| current > moment(detail.endTime)
  }
  // tab栏切换状态
  function changeTab_modal (channelIndex) {
      changeState({channelIndex})
      if(channelIndex=='3'){
        validateFieldsAndScroll((err) => {
          if (err) {
            return false
          } else {
            dispatch({
              type: `${namespace}/lmReChooseList`,
              payload: {}
            })
          }
        })
      }
  }
  //申请事由改变时
  function inputReasonChange(value, name){
    createFaymentMethodFlag = true
    let obj = {[name]: value}
    detail = Object.assign(detail, obj)
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {detail,createFaymentMethodFlag}
    })
  }
  
  //表单改变时
  function inputChange (value, name) {
    createFaymentMethodFlag = false
    let obj = {[name]: value}
    detail = Object.assign(detail, obj)
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {detail,createFaymentMethodFlag}
    })
  }
  function tableChange (value, name,data) {
    let obj = {[name]: value}
    for(var item of suitableDataList){
      if(item.key == data.key){
        item = Object.assign(item, obj)
      }
    }
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {suitableDataList}
    })
    countFun()
  }
  function checkboxChange (value, name) {
    createFaymentMethodFlag = false
    let obj = {[name]: value}
    checkboxData = Object.assign(checkboxData, obj)
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {checkboxData,createFaymentMethodFlag}
    })
  }
  
  //赋值distCoId
  function inputChangeDistCoId (value, name) {
    createFaymentMethodFlag = false
    detail.accountingName = value
    for(var item of distributionNameList){
        if(item.accEntityName == value){
          detail.accountingId = item.accEntityCode
        }
    }
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {detail,createFaymentMethodFlag}
    })
  }
  function onselect(){
    if(!detail.projectId){
      message.warn('请先选择项目名称')
      return false
    }
  }

  function uploadFile(){
    message.warn('暂无数据拉通')
    return false
  }
  function updateDataModal(){
    dispatch({
      type: `${namespace}/startTaskDto`,
      payload: {}
    })
    test2 = setInterval(() => {
      dispatch({
        type: `${namespace}/isSyncTheProject`,
        payload: {}
      })
    }, 15000);
  }

  // 线索原因
  function cluesUp(data,type){
    cluesUpModalObj.visible = !cluesUpModalObj.visible

    dispatch({
      type: `${namespace}/updateStore`,
      payload: { cluesUpModalObj }
    })
    if(type == 'show'){
      dispatch({
        type: `${namespace}/queryClueByClueId`,
        payload: { data }
      })
    }
  }

  if (!!modelObj.biz1) {
    pageProps1.biz = modelObj.biz1
    pageProps1.biz.syncBackCbf = (biz) => {
      dispatch({
        type: `${namespace}/updateStore`,
        payload: { biz1:biz }
      })
    }
  }
  if (!!modelObj.biz2) {
    pageProps2.biz = modelObj.biz2
    pageProps2.biz.syncBackCbf = (biz) => {
      dispatch({
        type: `${namespace}/updateStore`,
        payload: { biz2:biz }
      })
    }
  }
  if (!!modelObj.biz3) {
    pageProps3.biz = modelObj.biz3
    pageProps3.biz.syncBackCbf = (biz) => {
      dispatch({
        type: `${namespace}/updateStore`,
        payload: { biz3:biz }
      })
    }
  }
  return (
    <div className={cx('public_listMain')}>
      <div className="functionButton">
        <Button type='primary' disabled={actionType == 'check'}  onClick={() => { onSave() }}>保存</Button>
        <Popconfirm placement="top" title={"是否确认关闭，确认后关闭页面，不保存数据。"} onConfirm={() => onCancel()} okText="确定" cancelText="取消">
          <Button>关闭</Button>
        </Popconfirm>
      </div>
      <CollapsiblePanels title="分销佣金汇总申请表" hideUpDownBtn={true}>
        <Row >
        <div style={{color:'red',paddingLeft:'10%',fontSize:'16px'}}>注：申请事由最多不超过50个字</div>
        <Col span={24} style={{width: '90%'}}>
            <FormItem {...formItemLayout02}
              label="申请事由">
              {getFieldDecorator('applyReason', {
                initialValue: detail.applyReason,
                rules: [
                  { required: true, whitespace: true, message: '请输入申请事由', },
                  { max:  50, message: '已超过限定50字，请酌情删减。' }
                ],
              })(
              <TextArea  placeholder={'请输入申请事由'} disabled={actionType == 'check'} onChange={e=>{inputReasonChange(e.target.value,'applyReason')}}></TextArea>
              )}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col className="col" span={8}>
            <FormItem {...formItemLayout}
              label="项目名称">
              {getFieldDecorator('projectName', {
                initialValue: detail.projectName,
                rules: [
                  { required: true, whitespace: true, message: '请输入项目名称', },
                ],
              })(<Input disabled={actionType == 'check'} readOnly={true}
                placeholder={'请输入项目名称'}
                onChange={(e) => { inputChange(e.target.value, 'projectName') }}
                onClick={() => { updateProjectName() }}
              />)}
            </FormItem>
          </Col>
          <Col className="col" span={8}>
            <FormItem {...formItemLayout}
              label="分销公司名称">
              {getFieldDecorator('distCoName', {
                initialValue: detail.distCoName,
                rules: [
                  { required: true, whitespace: true, message: '请输入分销公司名称' },
                ],
              })(<Input disabled={actionType == 'check'} readOnly={true}
                placeholder={'请输入分销公司名称'}
                onChange={(e) => { inputChange(e.target.value, 'distCoName') }}
                onClick={() => { updateDistCoName() }}
              />)}
            </FormItem>
          </Col>
          <Col span={8} style={{position: 'relative'}}>
            <Tooltip title="分批次结算佣金的情况，从第二批起必须关联原佣金申请单。">
              <span style={{position: 'absolute',right: '-8px',top: '10px',background: '#555555',color: '#fff',width: '20px',height: '20px',borderRadius: '50%',paddingLeft: '6px',fontSize: '16px'}}>？</span>
            </Tooltip>
            <FormItem {...formItemLayout}
              label="关联原佣金申请单">
              {getFieldDecorator('applyName', {
                rules: [
                  { required: false, whitespace: true, message: '', },
                ],
                initialValue: detail.applyName,
              })(<Input disabled={actionType == 'check'} readOnly={true} style={{width: actionType?'100%':'60%'}}
                placeholder={'请关联原佣金申请单'}
                onChange={(e) => { inputChange(e.target.value, 'applyName') }}
                onClick={() => { updateOldCommission() }}
              />)}
            </FormItem>
            <Popconfirm  placement="top" title={"是否确定取消关联原佣金申请单"} onConfirm={() => onClear()} okText="确定" cancelText="取消">
              <Button  style={{display: actionType? 'none':'block',position: 'absolute',right:20,top:4,zIndex:99}}  type='primary'>取消关联</Button>
            </Popconfirm>
          </Col>
        </Row>
        <Row>
            <Col className="col" span={8}>
            <FormItem {...formItemLayout}
            label="费控核算主体">
                {getFieldDecorator(`accountingName`, {
                    rules: [{
                      required: true,whitespace: true, message: '费控核算主体'
                    }],
                    initialValue: detail.accountingName,
                })(
                  <Select disabled={actionType == 'check'|| detail.applyName !=''} placeholder="费控核算主体" onClick={() => { onselect() }} onChange={(e)=>{inputChangeDistCoId(e,'accountingName')}}>
                        { distributionNameList == undefined ?null:distributionNameList.map((itemed,key)=>{
                          return <Select.Option value={itemed.accEntityName} key={key}>{itemed.accEntityName}</Select.Option>
                        })}
                  </Select>
                )}
            </FormItem>
          </Col>
          <Col className="col" span={8}>
            <FormItem {...formItemLayout}
              label="佣金方案">
              {getFieldDecorator('ruleName', {
                initialValue: detail.ruleName,
                rules: [
                  { required: true, whitespace: true, message: '请输入佣金方案' },
                ],
              })(<Input disabled={actionType == 'check' || detail.applyName !=''} readOnly={true}
                placeholder={'请输入佣金方案'}
                onChange={(e) => { inputChange(e.target.value, 'ruleName') }}
                onClick={() => { updateCommission() }}
              />)}
            </FormItem>
          </Col>      
          <Col className="col" span={8}>
              <FormItem
                  {...formItemLayout}
                  label="签约归属截止日期"
                  >
                  {getFieldDecorator('endTime', {
                      rules:[{required:true,message:'请选择日期'}, 
                    ],
                    initialValue: detail.endTime? moment(detail.endTime, 'YYYY-MM-DD') : null
                  })(
                    <DatePicker disabled={actionType == 'check' || detail.applyName !=''}  format="YYYY-MM-DD"  onChange={(e, val) => inputChange(val, 'endTime')} />
                  )}
              </FormItem>
          </Col>
        </Row>
        <Row>
          <Col className="col" span={8}>
              <FormItem
                  {...formItemLayout}
                  label="登记时间"
                  >
                  {getFieldDecorator('createTime', {
                    initialValue: detail.createTime ? moment(detail.createTime, 'YYYY-MM-DD HH:mm:ss') : null
                  })(
                    <DatePicker disabled={true} format="YYYY-MM-DD HH:mm:ss"  onChange={(e, val) => inputChange(val, 'createTime')} />
                  )}
              </FormItem>
          </Col>
          <Col className="col" span={8}>
            <FormItem {...formItemLayout}
              label="登记人员">
              {getFieldDecorator('createByName', {
                initialValue: detail.createByName,
              })(<Input disabled={true}
                placeholder={'请输入登记人员'}
                onChange={(e) => { inputChange(e.target.value, 'createByName') }}
              />)}
            </FormItem>
          </Col>
          <Col className="col" span={8}>
            <FormItem label='佣金计算节点'  {...formItemLayout}>
                {getFieldDecorator('computeNodes', {
                  initialValue: detail.computeNodes + ''
                })(
                  <Select disabled={true} placeholder	= {'请输入佣金计算节点'} onChange={(e)=>{inputChange(e,'computeNodes')}}>
                      <Select.Option value="1">按签约归属日期</Select.Option>
                      <Select.Option value="2">按认购归属日期</Select.Option>
                      <Select.Option value="3">按网签日期</Select.Option>
                  </Select>
                )}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={16}>
            <FormItem {...formItemLayout01}
              label="备注">
              {getFieldDecorator('remark', {
                initialValue: detail.remark,
                rules: [
                  { required: false, whitespace: true, message: '', },
                ],
              })(
              <TextArea disabled={actionType == 'check'} style={{width:'97.6%'}} onChange={e=>{inputChange(e.target.value,'remark')}}></TextArea>
              )}
            </FormItem>
          </Col>
        </Row>
        <Row>
            <p>计佣条件</p>
            <div className={cx('flex')}>
              <div className={cx('meter_maid_buy_status')}>
                  <p>购房状态</p>
                  <Radio.Group disabled={actionType == 'check'} value={detail.buyState} onChange={(e) => { inputChange(e.target.value, 'buyState') }}>
                    <Radio value={1}>草签</Radio>
                    <Radio value={2}>网签</Radio>
                  </Radio.Group>
              </div>
              <div className={cx('meter_maid_right')}>
                  <p>付款方式及比例</p>
                  <Checkbox.Group disabled={actionType == 'check'} value={checkboxData.paymentTypeName} style={{ width: '100%' }} onChange={(e) => { checkboxChange(e, 'paymentTypeName') }}>
                    <Row>
                      <Col span={8} className={cx('col_margin_bottom')}>
                        <div className={cx('flex')}>
                          <Checkbox value="SD040201">一次性付款</Checkbox>
                          <div className={cx('flex','flex_1')}>
                            <span>回款比例：</span>
                              <Select disabled={actionType == 'check'}  value={String(checkboxData.oneTime)} size='small' style={{ width: 70 }}  onChange={(e)=>{checkboxChange(e,'oneTime')}}>
                                  { selectOptionData == undefined ?null:selectOptionData.map((itemed,key)=>{
                                    return <Select.Option value={itemed.value} key={key}>{itemed.name}</Select.Option>
                                  })}
                              </Select>&nbsp;%
                          </div>
                        </div> 
                      </Col>
                      <Col span={8} className={cx('col_margin_bottom')}>
                        <div className={cx('flex')}>
                          <Checkbox value="SD040205">混合贷款&nbsp;&nbsp;&nbsp;</Checkbox>
                          <div className={cx('flex','flex_1')}>
                            <span>回款比例：</span>
                              <Select disabled={actionType == 'check'}  value={String(checkboxData.hybrid)} size='small' style={{ width: 70 }}  onChange={(e)=>{checkboxChange(e,'hybrid')}}>
                                  { selectOptionData == undefined ?null:selectOptionData.map((itemed,key)=>{
                                    return <Select.Option value={itemed.value} key={key}>{itemed.name}</Select.Option>
                                  })}
                              </Select>&nbsp;%
                          </div>
                        </div> 
                      </Col>
                      <Col span={8} className={cx('col_margin_bottom')}>
                        <div className={cx('flex')}>
                          <Checkbox value="SD040208">非员工首付分期</Checkbox>
                          <div className={cx('flex','flex_1')}>
                            <span>回款比例：</span>
                              <Select disabled={actionType == 'check'}  value={String(checkboxData.noStaff)} size='small' style={{ width: 70 }}  onChange={(e)=>{checkboxChange(e,'noStaff')}}>
                                  { selectOptionData == undefined ?null:selectOptionData.map((itemed,key)=>{
                                    return <Select.Option value={itemed.value} key={key}>{itemed.name}</Select.Option>
                                  })}
                              </Select>&nbsp;%
                          </div>
                        </div> 
                      </Col>
                      <Col span={8} className={cx('col_margin_bottom')}>
                        <div className={cx('flex')}>
                          <Checkbox value="SD040203">商业贷款&nbsp;&nbsp;&nbsp;</Checkbox>
                          <div className={cx('flex','flex_1')}>
                            <span>回款比例：</span>
                              <Select disabled={actionType == 'check'}  value={String(checkboxData.business)} size='small' style={{ width: 70 }}  onChange={(e)=>{checkboxChange(e,'business')}}>
                                  { selectOptionData == undefined ?null:selectOptionData.map((itemed,key)=>{
                                    return <Select.Option value={itemed.value} key={key}>{itemed.name}</Select.Option>
                                  })}
                              </Select>&nbsp;%
                          </div>
                        </div> 
                      </Col>
                      <Col span={8} className={cx('col_margin_bottom')}>
                        <div className={cx('flex')}>
                          <Checkbox value="SD040204">公积金按揭</Checkbox>
                          <div className={cx('flex','flex_1')}>
                            <span>回款比例：</span>
                              <Select disabled={actionType == 'check'}  value={String(checkboxData.reserve)} size='small' style={{ width: 70 }}  onChange={(e)=>{checkboxChange(e,'reserve')}}>
                                  { selectOptionData == undefined ?null:selectOptionData.map((itemed,key)=>{
                                    return <Select.Option value={itemed.value} key={key}>{itemed.name}</Select.Option>
                                  })}
                              </Select>&nbsp;%
                          </div>
                        </div> 
                      </Col>
                      <Col span={8} className={cx('col_margin_bottom')}>
                        <div className={cx('flex')}>
                          <Checkbox value="SD040207">非员工全款分期</Checkbox>
                          <div className={cx('flex','flex_1')}>
                            <span>回款比例：</span>
                              <Select disabled={actionType == 'check'}  value={String(checkboxData.noStaffAll)} size='small'  style={{ width: 70 }} onChange={(e)=>{checkboxChange(e,'noStaffAll')}}>
                                  { selectOptionData == undefined ?null:selectOptionData.map((itemed,key)=>{
                                    return <Select.Option value={itemed.value} key={key}>{itemed.name}</Select.Option>
                                  })}
                              </Select>&nbsp;%
                          </div>
                        </div> 
                      </Col>
                    </Row>
                  </Checkbox.Group>
              </div>
            </div>
        </Row>
        <Row>
            <div className={cx('commissions_total')}>
                本批次签约套数：<span>{detail.signNumber}套；</span>签约金额：<span>{detail.signAmount}元，</span>总佣金金额：<span>{detail.totalAmount}元</span>
            </div>
        </Row>
        <div className={cx('commissions_info')}>
            <span className={cx('commissions_info_title')}>佣金申请单明细</span>
            <hr/>
            <div className={cx('commissions_info_but')}>
                <Button disabled={actionType == 'check'}  className={cx('margin_right_20')} onClick={() => {onCreate('生成')}}>生成佣金明细</Button>
                <Button disabled={actionType == 'check' || channelIndex != '1'} className={cx('margin_right_20')} onClick={() => {onDelete('删除') }}>删除</Button>
                <Button disabled={actionType == 'check'} className={cx('margin_right_20')} onClick={() => {exportClient()}}>导出客户</Button>
                <Button disabled={actionType == 'check'} className={cx('margin_right_20')} onClick={() => {updateUploadModal('导入')}}>导入</Button>
                <Button disabled={actionType == 'check'  || channelIndex != '1'} className={cx('margin_right_20')} onClick={() => {updateDeduction()}}>退房佣金抵扣</Button>
                <Button disabled={actionType == 'check'} className={cx('margin_right_20')} onClick={() => {updateFileModal()}}>附件</Button>
                <Button disabled={actionType == 'check'} className={cx('margin_right_20')} onClick={() => {updateDataModal()}} loading={uploading} >同步数据</Button>
            </div>
            <div className="detailsTab">
            <Tabs  onChange={changeTab_modal} type="line" activeKey={channelIndex} animated={false}> 
                <TabPane tab="符合结佣条件客户" key="1">
                <div className={cx('commissions_info_table_div')}>
                    <Grid {...gridProps} />
                </div>
                </TabPane>
                <TabPane tab="不符合结佣条件客户" key="2">
                <div className={cx('commissions_info_table_div')}>
                    <Grid {...gridProps} />
                </div>
                </TabPane>
                <TabPane tab="联名重选" key="3">
                <div className={cx('commissions_info_table_div')}>
                  <Table columns={columns3} dataSource={againJointData} scroll={{ x: 2800 }} />
                </div>
                </TabPane>
            </Tabs>
            </div>
        </div>
      </CollapsiblePanels>
      {/*分销公司名称*/}
      <Modal
        title={'分销公司名称'}
        width='1000px'
        destroyOnClose={true}
        visible={distCoNameModalObj.visible}
        onCancel={() => { updateDistCoName() }}
        onOk={() => { confirmDistCoName() }}
      >
        <div>
            <ListPage pageProps={pageProps1}/>
        </div>
      </Modal>
      {/* 项目名称弹窗 */}
      <Modal
        title={'所属项目'}
        width='1000px'
        visible={projectModalObj.visible}
        // destroyOnClose={true}
        onCancel={() => { updateProjectName() }}
        onOk={() => { confirmProject() }}
      >
        <div >
            <ListPage pageProps={pageProps2}/>
        </div>
      </Modal>
      {/*佣金方案*/}
      <Modal
        title={'佣金方案'}
        width='1000px'
        visible={commissionModalObj.visible}
        destroyOnClose={true}
        onCancel={() => { updateCommission() }}
        onOk={() => { confirmCommission() }}
      >
        <div>
            <ListPage pageProps={pageProps3}/>
        </div>
      </Modal>
      {/*关联原佣金申请单*/}
      <Modal
        title={'关联原佣金申请单'}
        width='1000px'
        visible={oldCommissionModalObj.visible}
        destroyOnClose={true}
        onCancel={() => { updateOldCommission() }}
        onOk={() => { confirmOldCommission() }}
      >
        <div>
            {/* <ListPage pageProps={pageProps4}/> */}
            <div style={{marginBottom:'12px'}}>
                  <Row>
                    <Col span={2} style={{lineHeight:'28px'}}>
                    <label>申请事由</label>:
                    </Col>
                    <Col span={6} style={{marginRight:'10px'}}>
                    <Input  value ={searchData.applyReason} placeholder="请输入申请事由" onChange={(e) => { inputSearch(e.target.value, 'applyReason') }}/>
                    </Col>
                    <Col span={3} style={{lineHeight:'28px'}}>
                    <label>分销公司名称</label>:
                    </Col>
                    <Col span={6} style={{marginRight:'10px'}}>
                    <Input value ={searchData.distCoName} placeholder="请输入分销公司名称" onChange={(e) => { inputSearch(e.target.value, 'distCoName') }}/>
                    </Col>
                    <Col span={2}></Col>
                    <Col span={4}>
                      <Button type='primary' onClick={() => {searchFun()}}>查询</Button>
                      <Button style={{marginLeft: '12px'}} onClick={() => {clearFun()}}>重置</Button>
                    </Col>
                  </Row>
                </div>                     
            <Grid {...gridProps1} />
        </div>
      </Modal>
      {/*退房佣金抵扣*/}
      <Modal
        width='800px'
        visible={deductionModalObj.visible}
        onCancel={() => { updateDeduction() }}
        destroyOnClose={true}
        footer={null}
      >
        <div className={cx('deduction')}>
          <Row>
            <Col className="col" span={8}>
              <FormItem {...formItemLayout}
                label="退房佣金抵扣">
                {getFieldDecorator('deduction', {
                  initialValue: deductionModalObj.deduction,
                  rules: [
                    { required: false, whitespace: true, message: '请输入退房佣金抵扣', },
                  ],
                  getValueFromEvent: (event) => {
                      return event.target.value.replace(/\D/g,'')
                  },
                })(<Input
                  placeholder={'请输入退房佣金抵扣'} 
                  onChange={(e) => { inputModChange(e.target.value, 'deduction') }}
                />)}
              </FormItem>
            </Col>
            <Col className="col" span={16}>
              <FormItem {...formItemLayout}
                label="退房佣金抵扣说明">
                {getFieldDecorator('deductionInfo', {
                  initialValue: deductionModalObj.deductionInfo,
                  rules: [
                    { required: false, whitespace: true, message: '请输入退房佣金抵扣说明' },
                  ],
                })(<Input
                  placeholder={'请输入退房佣金抵扣说明'}
                  onChange={(e) => { inputModChange(e.target.value, 'deductionInfo') }}
                />)}
              </FormItem>
            </Col>
          </Row>
          <div style={{textAlign: 'center'}}>
              <Button type='primary'  className={cx('margin_right_20')} onClick={() => {confirmDeduction()}}>确认</Button>
              <Button onClick={() => {updateDeduction() }}>取消</Button>
          </div>
        </div>
      </Modal>
     {/* 上传附件弹窗 */}
     <Modal
          visible={fileModalObj.visible}
          destroyOnClose={true}
          onCancel={() => {
            updateFileModal()
          }}
          footer={null}
          width={720}>
          <div style={{position:'relative'}}>
            <h3>附件信息</h3>
            <Button style={{position:'absolute',top:37,left:144,cursor:'pointer',zIndex:999}} onClick={() => {removeAll() }}>清除所有选择</Button>
              <Form>
                  <Row>
                      <Col span={24}>
                          <FormItem>
                              <Uploader
                                  uploadedUrls={imageUrls}
                                  removeFileCbf={(index) => { removeImgUrl(index) }}
                                  uploadSuccessCbf={(imgUrl,fileObj) => { updateImageModel(imgUrl,fileObj) }}
                                  showType='5'
                                  fileType='file'
                                  uploadTip=' '
                                  maxFiles='50'
                                  accept={'.xlsx,.xls,.doc,.docx,.pdf,.txt'}
                              />
                          </FormItem>
                      </Col>
                  </Row>
              </Form>
          </div>
      </Modal>
      {/* 上传附件弹窗 */}
      <Modal title={'导入列表'}
          visible={uploadFileObj.visible}
          okText={'导入'}
          cancelText={'取消'}
          destroyOnClose={true}
          confirmLoading={uploadFileObj.confirmLoading}
          onCancel={() => {
              updateUploadModal()
          }}
          onOk={() => {
              dispatch({
                  type: `${namespace}/importAccount`,
                  payload: {}
              });
          }}
          width={720}>
          <div className={styles.modalCss}>
              <Form>
                  <Row>
                      <Col span={24}>
                          <FormItem label={'文件'}>
                              <Uploader
                                  uploadedUrls={imageUrls1}
                                  removeFileCbf={(index) => { removeImgUrl1(index) }}
                                  uploadSuccessCbf={(imgUrl,fileObj) => { updateImageModel1(imgUrl,fileObj) }}
                                  showType='5'
                                  accept={'.xlsx,.xls'}
                                  maxFiles='50'
                                  uploadTip='支持*.xlsx, *.xls格式文件。'
                                  fileType='file'
                              />
                          </FormItem>
                      </Col>
                  </Row>
              </Form>
          </div>
      </Modal>
      <Modal
        title={'联名购房佣金归属确认'}
        width='1200px'
        visible={buyHouseModalObj.visible}
        destroyOnClose={true}
        onCancel={() => { updateBuyHouse() }}
        onOk={() => { confirmBuyHouse() }}
      >
        <div>
        <Table dataSource={jointData} columns={columns88} scroll={{ x: 1800 }}/>
        </div>
      </Modal>
      <Modal
        title={'联名购房明细'}
        width='1200px'
        visible={buyHouseInfo.visible}
        destroyOnClose={true}
        onCancel={() => { updateHouseInfo() }}
        footer={null}
      >
        <div>
        <Table dataSource={houseInfoData} columns={columnsInfo} scroll={{ x: 1800 }}/>
        </div>
      </Modal>
      <Modal
        width='655px'
        visible={cluesUpModalObj.visible}
        destroyOnClose={true}
        onCancel={() => { cluesUp('','hide') }}
        footer={null}
      >
        <div style={{padding:'0 60px',color:'#333'}}>
            <div style={{marginBottom:'20px'}}>
              <div style={{fontWeight: 600,textAlign:'center'}}>失效原因</div>
              <div><span style={{fontWeight: 600}}>客户电话：</span><span>{cluesUpModalObj.data.name}</span></div>
              <div><span style={{fontWeight: 600}}>客户姓名：</span><span>{cluesUpModalObj.data.mobile}</span></div>
              <div><span style={{fontWeight: 600}}>报备时间：</span><span>{cluesUpModalObj.data.createTime}</span></div>
              <div><span style={{fontWeight: 600}}>失效原因：</span><span>{cluesUpModalObj.data.expiredMsg}</span></div>
              <div><span style={{fontWeight: 600}}>失效时间：</span><span>{cluesUpModalObj.data.expiredTime}</span></div>
            </div>
        </div>
      </Modal>

      {uploading&&<div style={{position: "fixed",width: "100%",height: "100%",background: "rgba(204, 204, 204,.6)",zIndex: 9999999,top: "62px",textAlign: 'center',paddingTop:'200px',left:'168px'}}>
        <Spin tip="系统正在同步数据,请您稍后再次生成佣明细。"></Spin>
      </div>}
    </div>
  )
}

// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(commissionsDistListDetailView))
